*{
    margin: 0;
    padding: 0;
}
a{
    color: #666;
    text-decoration: none;
}
a:hover{
    color: tomato;
}
body,html{
    width: 100%;
    height: 100%;
    scroll-behavior: smooth;
}

#header{
    width: 90%;
    height: 100%;
    margin: 0px auto;
    min-width: 1200px;
}
/* #header div{
    width: 100%;
    
    height: 100px;

} */
#header #toushang ul{
    list-style-type: none;
    height: 80px;
    background-color:#f8f8f830;
    box-shadow:5px 5px 10px #00000050 ;
}

#logo{
    float: left;
    margin-left: 50px;
    margin-top: 4px;
}

#header div ul .a{
    float: left;
    margin-left: 50px;
    margin-top: 42px;
}
.a a{
    text-decoration: none;
    color: #666;
    padding: 0px 3px;
}

.a a:hover{
    color: black;
    border-bottom: 2px solid black;
}

#heading{
    width: 80%;
    margin-left: 10%;
    margin-top: 10px;
    box-shadow:5px 5px 10px #00000050 ;
}

#mian{
    width: 100%;
    height: 100%;
}
#left{
    width: 40%;
    /* height: 1200px; */
    background-color: rosybrown;
    float: left;
    margin-left: 5%;
    margin-top: 10px;
    box-shadow:5px 5px 10px #00000050 ;
}
#right{
    width: 40%;
    /* height: 1200px; */
    background-color: burlywood;
    float: left;
    /* margin-left: 5%; */
    margin-top: 10px;
    box-shadow:5px 5px 10px #00000050 ;
}
#center{
    width: 10%;
    height: 1600px;
    /* background-color: cadetblue; */
    float: left;
    margin-top: 10px;
    
}
#center #jieshao {
    writing-mode:vertical-rl;
    float: right;
    margin-left: 2px;
    /* color: #666; */
    font-size: 14px;
    position: sticky;
    top: 410px;
}
#main #center ul {
    list-style-type: none;
    margin: 50px auto;
    width: 100px;
    height: 300px;
    padding-top: 30px;
    background-color: skyblue;
    position: sticky;
    top: 30px;
    box-shadow:5px 5px 10px #00000050 ;
}

#main #center ul a{
    color: #666;
    text-decoration: none;
    
}
#main #center ul li:hover{
    color: black;
    border-bottom: 2px solid white;
}
#main #center ul li{
    float: none;
    width: 64px;
   margin: 20px auto;
    /* width: 100PX;
    height: 20PX; */
    background-color: skyblue;
    border-bottom: 2px solid skyblue;
    
}
article img{
    width: 120px;
    height: 120px;
    margin: 30px 0px 0px 20px;
    border: 1px solid white;
}
article p{
    color: white;
    margin-left:20px ;
    margin-top: 5px;
}
article #name{
    font-size: 20px;
    margin: 4px 0px 4px 20px;
}
article{
    background-color: #ffffff30;
    margin: 10px;
    padding: 10px;
}

#newbook{
    list-style-type: none;
    background-color: #ffffff30;
    margin: 10px;
    padding: 10px;
}
#newbook a{
    color: #666;
    text-decoration:none;
    cursor:default;
}
#newbook a:hover{
    color: tomato;
}

#newbook li{
    margin-left: 20px;
}

#production{
    height: 200px;
    margin: 10px;
    padding: 10px;
    background-color: #ffffff30;
    clear: both;
}
.por{
    width: 100px;
    height: 120px;
    background-color: white;
    float: left;
    margin: 5px;
    margin: 10px -50px 0 0;
    transform: perspective(900px) rotateY(60deg);
    box-shadow: 1px 1px 10px #666;
    transition: all 0.5s;
}
.por:hover{
    transform: perspective(0) rotateY(0deg);
    margin: 5px -10px 0 36px;
}
#jion{
    margin: 10px;
    padding: 10px;
    background-color: #ffffff30;
}

#production img{
    margin: 4px;
    width: 92px;
    height: 60px;
}